<template>
	<view>
		<view class="box">
			<u-swiper :list="list1" indicator indicatorMode="line" :radius="0" :height="200" @click="click"></u-swiper>
			<view class="main">
				<view class="notice-part">
					<view class="left">
						<text class="header">通知</text>
						<view class="text">{{noticeText||'wu'}}</view>
					</view>
					<u-text type="info" text="更多"></u-text>
				</view>
				<view class="goin-door">
					<view class="goinone" v-for="(item,index) in doorlist" :key="index" @click="toPage(item.goinUrl)">
						<image class="img" :src="item.imgUrl" mode="aspectFit"></image>
						<text class="text">{{item.title}}</text>
					</view>
				</view>
				<view class="bottom-part">
					<view class="ask-docter">
						<text class="headtext">名医问诊</text>
						<scroll-view scroll-x="true" class="mingyis">
							<view class="askOne" v-for="(item,index) in askList" :key="index" @click="findMy(item.name)">
								<image class="tximg" :src="item.imgUrl" mode="aspectFit"></image>
								<text class="name">{{item.name}}</text>
								<text class="intro">{{item.introduction}}</text>
							</view>
						</scroll-view>
					</view>
					<view class="health-records">
						<text class="headtext">健康档案</text>
						<view class="health-card">
							<view class="leftpart">
								<image class="txpic" :src="personMess.txpic?personMess.txpic:(personMess.sex == '男'? '../../static/mantx.png':'../../static/womantx.png')"
								 mode=""></image>
							</view>
							<view class="rightpart">
								<text class="title">{{personMess.name + `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;` + personMess.sex +`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`+ personMess.age+'岁'}}</text>
								<text class="canshu">{{'身高：'+personMess.height+'cm'+ `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;` + '体重：' + personMess.weight +'kg'+ `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;` + '血型：'+ personMess.blood}}</text>
								<view class="buts">
									<view class="but">
										健康数据
									</view>
									<view class="but">
										健康资料
									</view>
									<view class="but">
										亲属信息
									</view>
								</view>
							</view>
							<view class="changpea">
								<image class="qhimg" src="../../static/qiehuan.png" mode=""></image>
								切换亲属
							</view>
						</view>
					</view>
					<view class="health-monitoring">
						<text class="headtext">名医问诊</text>
						<view class="monitorings" v-for="(item,index) in monitoringlist" :key="index">
							<view class="leftpart">
								<image class="img" :src="item.equipmentimg" mode=""></image>
								<view class="message">
									<text class="title">{{item.title}}</text>
									<text class="text">心率：{{item.heartrate}}</text>
									<text class="text">血压：{{item.bloodpressure}}</text>
									<text class="text">血氧饱和度：{{item.bloodoxygen}}</text>
								</view>
							</view>
							<view class="rightpart">
								<view class="state" :style="item.state=='正常'?'border: 2rpx solid rgba(67, 207, 124, 1);color: rgba(67, 207, 124, 1)' : (item.state=='异常'? 'border: 2rpx solid rgba(212, 48, 48, 1);color: rgba(212, 48, 48, 1)' : 'border: 2rpx solid rgba(255, 189, 56, 1);color: rgba(255, 189, 56, 1)')">
									{{item.state}}
								</view>
								<view class="more">
									更多
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				noticeText: '7月17日可根据用户的陪诊需求定制、7月17日可根据用户的陪诊需求定制、7月17日可根据用户的陪诊需求定制、',
				doorlist: [{
						imgUrl: '../../static/goinimgs/quanchengpeizhen.png',
						title: '全程陪诊',
						goinUrl: '/pages/gonPages/quanchengpeizhen'
					},
					{
						imgUrl: '../../static/goinimgs/xianshangguahao.png',
						title: '线上挂号',
						goinUrl: ''
					},
					{
						imgUrl: '../../static/goinimgs/yidizhuanzhen.png',
						title: '异地转诊',
						goinUrl: ''
					},
					{
						imgUrl: '../../static/goinimgs/jiankangjianhu.png',
						title: '健康监护',
						goinUrl: ''
					},
					{
						imgUrl: '../../static/goinimgs/yanglaoyuantuijian.png',
						title: '养老院推荐',
						goinUrl: ''
					},
					{
						imgUrl: '../../static/goinimgs/jiazhengfuwu.png',
						title: '家政服务',
						goinUrl: ''
					},
					{
						imgUrl: '../../static/goinimgs/shangmenzuyu.png',
						title: '上门助浴',
						goinUrl: ''
					},
					{
						imgUrl: '../../static/goinimgs/gengduofuwu.png',
						title: '更多服务',
						goinUrl: ''
					}
				],
				askList: [{
						imgUrl: '../../static/mingyi.png',
						name: '王磊',
						introduction: '骨科、康复'
					},
					{
						imgUrl: '../../static/mingyi.png',
						name: '王磊',
						introduction: '骨科、康复'
					},
					{
						imgUrl: '../../static/mingyi.png',
						name: '王磊',
						introduction: '骨科、康复'
					},
					{
						imgUrl: '../../static/mingyi.png',
						name: '王磊',
						introduction: '骨科、康复'
					},
					{
						imgUrl: '../../static/mingyi.png',
						name: '王磊',
						introduction: '骨科、康复'
					},
					{
						imgUrl: '../../static/mingyi.png',
						name: '王磊',
						introduction: '骨科、康复'
					},
				],
				personMess: {
					txpic: '',
					name: '张宇',
					sex: '男',
					age: '54',
					height: '170',
					weight: '60',
					blood: 'B'
				},
				monitoringlist: [{
						equipmentimg: '../../static/lizi1.png',
						title: '健康数据',
						heartrate: '75',
						bloodpressure: '72/98',
						bloodoxygen: '96',
						state: '正常',
					},
					{
						equipmentimg: '../../static/lizi2.png',
						title: '健康数据',
						heartrate: '75',
						bloodpressure: '72/98',
						bloodoxygen: '96',
						state: '异常',
					},
					{
						equipmentimg: '../../static/lizi1.png',
						title: '健康数据',
						heartrate: '75',
						bloodpressure: '72/98',
						bloodoxygen: '96',
						state: '离线',
					}
				]
			}
		},
		created() {
			console.log(this.noticeText)
		},
		methods: {
			findMy(name) {
				console.log(name)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 0 0 20rpx 0;
		background: rgba(232, 232, 232, 0.5);
		width: 100%;
		height: 100%;
	}

	.main {
		padding: 30rpx 0 30rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.notice-part {
		width: 95%;
		height: 84rpx;
		display: inline-flex;
		align-items: center;
		background-color: #FFFFFF;

		.left {
			display: inline-flex;
			align-items: center;
			width: 88%;

			.header {
				color: rgba(212, 48, 48, 1);
				font-size: 40rpx;
				font-weight: 800;
				font-style: italic;
				white-space: nowrap;
			}

			.text {
				overflow: hidden;
				/* 确保超出容器的文本被裁剪 */
				white-space: nowrap;
				/* 确保文本在一行内显示 */
				text-overflow: ellipsis;
				/* 使用省略号表示文本超出 */
				margin-left: 20rpx;
				font-size: 26rpx;
				font-weight: 700;
				color: rgba(51, 51, 51, 1);
				margin-right: 40rpx;
				font-family: PingFang SC Bold;
			}

		}
	}

	.goin-door {
		width: 100%;
		background-color: #FFFFFF;
		padding-top: 20rpx;
		margin-top: 20rpx;

		.goinone {
			width: 25%;
			display: inline-grid;
			justify-content: center;
			justify-items: center;
			margin-bottom: 30rpx;

			.img {
				width: 90rpx;
				height: 90rpx;
			}

			.text {
				font-size: 24rpx;
				white-space: nowrap;
			}
		}
	}

	.bottom-part {
		width: 94%;
		padding: 20rpx 3% 20rpx 3%;
	}
	.ask-docter {
		width: 100%;

		.headtext {
			font-size: 36rpx;
			font-weight: 700;
		}

		.mingyis {
			width: 100%;
			white-space: nowrap;
			margin-top: 20rpx;

			.askOne {
				width: 31.2%;
				height: 310rpx;
				border-radius: 16rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.06);
				display: inline-grid;
				justify-items: center;
				align-items: center;
				margin-right: 22rpx;

				.tximg {
					width: 180rpx;
					height: 200rpx;
					border-radius: 16rpx;
					background-color: #e0e6ff;
				}

				.name {
					font-size: 26rpx;
					font-weight: 700;
				}

				.intro {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
	}

	.health-records {
		width: 100%;
		margin-top: 20rpx;

		.headtext {
			font-size: 36rpx;
			font-weight: 700;
		}

		.health-card {
			margin-top: 20rpx;
			width: 100%;
			height: 250rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.06);
			display: inline-flex;
			align-items: center;

			.leftpart {
				margin-left: 30rpx;

				.txpic {
					width: 176rpx;
					height: 176rpx;
				}
			}

			.rightpart {
				display: inline-grid;
				margin-left: 30rpx;

				.title {
					font-size: 26rpx;
					font-weight: 700;
					color: rgba(51, 51, 51, 1);
				}

				.canshu {
					margin-top: 22rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
				}

				.buts {
					margin-top: 22rpx;
					display: inline-flex;

					.but {
						margin-right: 34rpx;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						width: 118rpx;
						height: 44rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(75, 129, 251, 1);
						border-radius: 38rpx;
						border: 2rpx solid rgba(42, 130, 228, 1);
					}
				}
			}

			.changpea {
				position: absolute;
				margin-top: -140rpx;
				right: 3%;
				width: 136rpx;
				height: 44rpx;
				border-radius: 38rpx 0rpx 0rpx 38rpx;
				background: rgba(75, 129, 251, 1);
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				display: inline-flex;
				align-items: center;
				justify-content: center;

				.qhimg {
					width: 24rpx;
					height: 17rpx;
				}
			}
		}
	}

	.health-monitoring {
		width: 100%;
		margin-top: 20rpx;

		.headtext {
			font-size: 36rpx;
			font-weight: 700;
		}

		.monitorings {
			margin-top: 20rpx;
			padding: 30rpx 28rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.06);
			margin-bottom: 34rpx;
			display: flex;
			justify-content: space-between;

			.leftpart {
				display: inline-flex;
				align-items: center;

				.img {
					width: 148rpx;
					height: 148rpx;
				}

				.message {
					margin-left: 50rpx;
					display: grid;

					.title {
						font-size: 26rpx;
						font-weight: 700;
						color: rgba(51, 51, 51, 1);
						margin-bottom: 20rpx;
					}

					.text {
						margin-bottom: 10rpx;
						font-size: 26rpx;
						font-weight: 700;
						color: rgba(51, 51, 51, 1);
					}
				}
			}

			.rightpart {
				display: grid;
				justify-items: end;
				align-content: space-between;

				.state {
					width: 80rpx;
					height: 44rpx;
					border-radius: 38rpx;
					border: 2rpx solid rgba(67, 207, 124, 1);
					font-size: 20rpx;
					font-weight: 400;
					display: inline-flex;
					align-items: center;
					justify-content: center;
				}

				.more {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
	}
</style>
